import React, { Component } from 'react';
/**
 * 在jsx中定义dom
 * 在jsx中书写表达式
 * 组件的定义方式一：函数式定义
 */
const DemoDOM = ()=>{

    let str = '表达式';
    return (
        <div>
            <p>您可以在jsx dom中嵌入{str}</p>
            <p>组件的定义方式一：函数式定义</p>
        </div>
    )
}
/**
 * 组件的定义方式二：继承React.Component
 */
class DemoCOM extends Component {
    render() {
        return (
            <div className="">
                <p>组件的定义方式二：继承React.Component</p>
            </div>
        );
    }
}

/**
 * 绑定样式
 */
class DemoStyle extends Component {
    constructor (){
        super();
        this.state = {
            dyStyle: {
                color: 'red',
                fontSize: '14px'
            }
        }

        setTimeout(()=>{
            this.setState({
                dyStyle: {
                    color: 'blue',
                    fontSize: '18px'
                }
            })
        },5000);
    }
    render() {
        return (
            <div style={this.state.dyStyle}>
                <p>5s后改变颜色</p>
            </div>
        );
    }
}

/**
 * 子组件向父组件传值
 */
class DemoFather extends Component {
    constructor (props){
        super(props);
        this.state = {
            email: ""
        }

        console.log("this.props:",this.props);
    }
    handleEmail (e){
        this.setState({email: e.target.value});
    }
    render() {
        return (
            <div>
                <p>输入的地址：{this.state.email}</p>
                {/* 
                this.handleEmail会在子组件中被调用
                为了让this.handleEmail里面的this指向父组件，而不是子组件，所以需要绑定bind
                或者使用箭头函数，类似于定义事件的处理
                */}
                {/* <DemoChild handleEmail={this.handleEmail.bind(this)}/> */}
                <DemoChild handleEmail={(e)=>{this.handleEmail(e)}}/>
            </div>
        );
    }
}

class DemoChild extends Component {
    render() {
        return (
            <div>
                {/* 在子组件中可以直接通过this.props调用属性 */}
                <input onChange={this.props.handleEmail}/>
            </div>
        );
    }
}



// 以下是自定义组件示例
class ReactDemo extends Component {
    render() {
        return (
            <div className="">
                <p>ReactDemo</p>
                <DemoDOM />
                <DemoCOM />
                <DemoStyle />

                <DemoFather />
            </div>
        );
    }
}

export default ReactDemo;